<template>
  <div class="home-page">
    <!-- 标题广告 - 修改为轮播图 -->
    <div class="study-motivation-page">
      <el-carousel
        indicator-position="outside"
        height="500px"
        :interval="5000"
        arrow="always"
        class="motivation-carousel"
      >
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <div
            class="carousel-slide"
            :style="{ backgroundImage: `url(${item.image})` }"
          >
            <el-container>
              <el-main>
                <div class="content-wrapper">
                  <h1 class="title">让每次自习都充满动力</h1>
                  <p class="subtitle">
                    加入我们的在线自习室，与全球学习者一起专注学习，提高效率，突破自我。
                  </p>
                  <el-button
                    type="primary"
                    size="large"
                    round
                    class="start-button"
                    @click="startLearning"
                  >
                    立即开始学习
                  </el-button>
                </div>
              </el-main>
            </el-container>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 数据展示 -->
    <div class="data-container">
      <!-- 保持原有数据展示部分不变 -->
      <div class="inner-container">
        <div class="data-item">
          <h3>{{ formattedOnlineUsers }}</h3>
          <p>在线用户数</p>
        </div>
        <div class="data-item">
          <h3>{{ formattedTotalDuration }}</h3>
          <p>全站累计学习时间</p>
        </div>
        <div class="data-item">
          <h3>{{ formattedRoomCounts }}</h3>
          <p>活跃自习室数</p>
        </div>
        <div class="data-item">
          <h3>{{ formattedTotalUsers }}</h3>
          <p>会员数</p>
        </div>
      </div>
    </div>

    <div class="room-title">精选自习室</div>
    <!-- 精选自习室展示 -->
    <div class="room-container">
      <!-- 保持原有自习室展示部分不变 -->
      <div class="inner-container">
        <div class="room-card">
          <div class="image">
            <img src="@/assets/study-room/安静.png" alt="" />
          </div>
          <div class="t1">安静自习室</div>
          <div class="t2">适合安静专注学习环境的学者</div>
          <div class="foot">
            <div style="display: flex; align-items: center">
              <el-icon>
                <User />
              </el-icon>
              &nbsp;328
            </div>
            <el-button type="primary" plain @click="startStudy"
              >进入学习</el-button
            >
          </div>
        </div>
        <div class="room-card">
          <div class="image">
            <img src="@/assets/study-room/白噪音.png" alt="" />
          </div>
          <div class="t1">白噪音自习室</div>
          <div class="t2">温和的背景音乐，提供舒适的学习氛围</div>
          <div class="foot">
            <div style="display: flex; align-items: center">
              <el-icon>
                <User />
              </el-icon>
              &nbsp;246
            </div>
            <el-button type="primary" plain @click="startStudy"
              >进入学习</el-button
            >
          </div>
        </div>
        <div class="room-card">
          <div class="image">
            <img src="@/assets/study-room/考研.png" alt="" />
          </div>
          <div class="t1">考研专区</div>
          <div class="t2">为准考研学生的专属学习提供转瞬空间</div>
          <div class="foot">
            <div style="display: flex; align-items: center">
              <el-icon>
                <User />
              </el-icon>
              &nbsp;512
            </div>
            <el-button type="primary" plain @click="startStudy"
              >进入学习</el-button
            >
          </div>
        </div>
        <div class="room-card">
          <div class="image">
            <img src="@/assets/study-room/学习小组.png" alt="" />
          </div>
          <div class="t1">学习小组室</div>
          <div class="t2">支持多人协作的团队学习空间</div>
          <div class="foot">
            <div style="display: flex; align-items: center">
              <el-icon>
                <User />
              </el-icon>
              &nbsp;185
            </div>
            <el-button type="primary" plain @click="startStudy"
              >进入学习</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { fetchTotalUsers, getOnlineUser, getRoomCount } from "@/api/user";

// 新增轮播图数据
import bg1 from "@/assets/study-room/bg2.png";
import bg2 from "@/assets/study-room/bg3.png";
import bg3 from "@/assets/study-room/bg1.png";

// 轮播图数据
const carouselItems = ref([{ image: bg1 }, { image: bg2 }, { image: bg3 }]);

// 保持原有的数据和方法不变
const onlineUsers = ref(0);
const totalDuration = ref(1269734);
const roomCounts = ref(0);
const totalUsers = ref(0);

const formattedOnlineUsers = computed(
  () => onlineUsers.value?.toLocaleString() || "0"
);
const formattedTotalDuration = computed(
  () => totalDuration.value?.toLocaleString() || "0"
);
const formattedRoomCounts = computed(
  () => roomCounts.value?.toLocaleString() || "0"
);
const formattedTotalUsers = computed(
  () => totalUsers.value?.toLocaleString() || "0"
);

const router = useRouter();

const getTotalUsers = async () => {
  try {
    const response = await fetchTotalUsers();
    console.log(response);
    totalUsers.value = response.data;
  } catch (error) {
    console.error("获取用户总数失败:", error);
    totalUsers.value = 0;
  }
};
const getOnlineUsers = async () => {
  try {
    const response = await getOnlineUser();
    console.log(response);
    onlineUsers.value = response.data;
  } catch (error) {
    console.error("获取在线用户数失败:", error);
    onlineUsers.value = 0;
  }
};
const getActiveRooms = async () => {
  try {
    const response = await getRoomCount();
    console.log(response);
    roomCounts.value = response.data;
  } catch (error) {
    console.error("获取在线用户数失败:", error);
    roomCounts.value = 0;
  }
};
const startStudy = () => {
  router.push("/study-room");
};

onMounted(() => {
  getTotalUsers();
  getOnlineUsers();
});

const startLearning = () => {
  router.push("/study-room");
};
</script>

<style scoped lang="scss">
// 保持原有的基础样式不变
.home-page {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 修改标题广告样式为轮播图
.study-motivation-page {
  width: 100%;
  height: auto;

  .motivation-carousel {
    width: 100%;

    .carousel-slide {
      width: 100%;
      height: 500px;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to right,
          rgb(245, 247, 250),
          rgba(195, 207, 226, 0)
        );
      }
    }

    .el-carousel__indicators {
      bottom: 20px;

      .el-carousel__indicator {
        padding: 8px 4px;

        .el-carousel__button {
          width: 30px;
          height: 3px;
          border-radius: 2px;
        }
      }
    }
  }

  .content-wrapper {
    position: relative;
    z-index: 1;
    max-width: 800px;
    width: 100%;
    padding: 2rem 1rem;
    text-align: left;
  }
}

// 保持原有的标题、副标题和按钮样式不变
.title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #5a6d82;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.start-button {
  padding: 0.8rem 2rem;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

// 保持原有的数据展示区域样式不变
.data-container {
  width: 100%;
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;

  .inner-container {
    width: 100%;
    max-width: 1216px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;

    .data-item {
      text-align: center;
      padding: 1rem;

      h3 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: bold;
        color: #2563eb;
        margin-bottom: 0.5rem;
      }

      p {
        color: #6b7280;
        font-size: clamp(0.875rem, 1.5vw, 1rem);
      }
    }
  }
}

// 保持原有的自习室标题和卡片样式不变
.room-title {
  width: 100%;
  max-width: 1216px;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: bold;
  padding: 0 1rem;
  margin: 1rem 0;
}

.room-container {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;

  .inner-container {
    width: 100%;
    max-width: 1216px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;

    .room-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      }

      .image {
        width: 100%;
        height: 0;
        padding-bottom: 67%;
        position: relative;
        overflow: hidden;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .t1 {
        font-size: 1.1rem;
        font-weight: 500;
        color: #000000;
        padding: 0.75rem 1rem 0;
      }

      .t2 {
        color: #6b7280;
        font-size: 0.875rem;
        padding: 0 1rem;
        margin: 0.5rem 0;
      }

      .foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-top: 1px solid #f0f0f0;

        .el-button {
          padding: 0.4rem 1rem;
        }
      }
    }
  }
}

// 保持原有的响应式调整不变
@media (max-width: 768px) {
  .study-motivation-page {
    .content-wrapper {
      text-align: center;
    }

    .start-button {
      margin: 0 auto;
    }
  }

  .data-container .inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .data-container .inner-container {
    grid-template-columns: 1fr;
  }

  .room-container .inner-container {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}
</style>
